<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Source: packages/heat/src/heat.vue</title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>

<body>

<div id="main">

    <h1 class="page-title">Source: packages/heat/src/heat.vue</h1>

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>&lt;template>
  &lt;div>&lt;/div>
&lt;/template>

&lt;script>

  /**
   * 热力图覆盖物组件
   * @module xdh-map-heat
   */

  import Feature from 'ol/Feature'
  import Point from 'ol/geom/Point'
  import Vector from 'ol/source/Vector'
  import Heatmap from 'ol/layer/Heatmap'
  import CleanMixin from 'utils/mixins/clean'
  import factory from 'utils/mixins/factory'
  import {getParent, mapReady} from 'utils/util'
import { convertToWgs84 } from 'utils/convert'
  /**
   * 参数选项
   * @member props
   * @property {number} [opacity=1] 透明度
   * @property {boolean} [visible=true] 是否可见
   * @property {number} [zIndex] 层级,图层渲染的z-index。在渲染时，将按照Z-index然后按位置对层进行排序
   * @property {number} [minResolution]  此图层可见的最小分辨率（包括）
   * @property {number} [maxResolution] 此图层可见的最小分辨率（包括）
   * @property {string[]} [gradient] 热图的颜色渐变，指定为CSS颜色字符串数组
   * @property {number}  [radius=8] 半径大小（以像素为单位）
   * @property {number} [blur=15] 模糊大小（以像素为单位）
   * @property {number} [shadow=250] 阴影大小，以像素为单
   * @property {string|Function} [weight=weight] 用于权重的要素属性或从要素返回权重的函数。重量值的范围应为0到1（外部的值将被限制在该范围内）
   * @property {object[]} data 数据对象数组，对象属性包含：lon（经度）、lat（维度）、weight（权重）
   * @property {object} [prop] 数据对象字段映射
   */

  const options = {
    // 不透明度（0,1）
    opacity: {
      type: Number,
      default: 1
    },
    // 是否能见
    visible: {
      type: Boolean,
      default: true
    },
    // 图层渲染的z-index。在渲染时，将按照Z-index然后按位置对层进行排序
    zIndex: Number,
    // 此图层可见的最小分辨率（包括）
    minResolution: Number,
    // 最低分辨率（不包括在内），此层将在该分辨率下可见
    maxResolution: Number,
    // 热图的颜色渐变，指定为CSS颜色字符串数组
    gradient: {
      type: Array,
      default() {
        return ['#00f', '#0ff', '#0f0', '#ff0', '#f00']
      }
    },
    // 半径大小（以像素为单位）
    radius: {
      type: Number,
      default: 8
    },
    // 模糊大小（以像素为单位）
    blur: {
      type: Number,
      default: 15
    },
    // 阴影大小，以像素为单
    shadow: {
      type: Number,
      default: 250
    },
    // 用于权重的要素属性或从要素返回权重的函数。重量值的范围应为0到1（外部的值将被限制在该范围内）。
    weight: {
      type: [String, Function],
      default: 'weight'
    }
  }

  const factoryMixin = factory(options)

  export default {
    name: 'XdhMapHeat',
    mixins: [CleanMixin, factoryMixin],
    props: {
      ...factoryMixin.props,
      data: {
        type: Array,
        default() {
          return []
        }
      },
      prop: {
        type: Object,
        default() {
          return {
            lon: 'lon',
            lat: 'lat',
            // 权重值，取 0 ~ 1
            weight: 'weight'
          }
        }
      }
    },
    watch: {
      data() {
        this.removeLayer()
        this.draw()
      }
    },
    inject: ['coordType'],
    methods: {
      draw() {
        if (!this.parent) return
        const features = this.createFeatures()
        const source = new Vector()
        source.addFeatures(features)
        this.layer = new Heatmap({
          source: source,
          ...this.styleFactory()
        })
        this.parent.map.addLayer(this.layer)
      },
      createFeatures() {
        const prop = this.prop
        return this.data.map(item => {
          return new Feature({
            // 根据坐标类型对坐标进行转换
            geometry: new Point(convertToWgs84(this.coordType, [item[prop.lon], item[prop.lat]])),
            weight: item[prop.weight] || 1
          })
        })
      },
      removeLayer() {
        if (this.parent &amp;&amp; this.layer) {
          this.layer.disposeInternal()
          this.parent.map.removeLayer(this.layer)
        }
      }
    },
    created() {
      this.parent = getParent.call(this)
      mapReady.call(this, this.draw)

    },
    beforeDestroy() {
      this.removeLayer()
    }
  }
&lt;/script>

</code></pre>
        </article>
    </section>




</div>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-xdh-map.html">xdh-map</a></li><li><a href="module-xdh-map-circle.html">xdh-map-circle</a></li><li><a href="module-xdh-map-draw.html">xdh-map-draw</a></li><li><a href="module-xdh-map-echarts.html">xdh-map-echarts</a></li><li><a href="module-xdh-map-heat.html">xdh-map-heat</a></li><li><a href="module-xdh-map-html.html">xdh-map-html</a></li><li><a href="module-xdh-map-icon.html">xdh-map-icon</a></li><li><a href="module-xdh-map-image.html">xdh-map-image</a></li><li><a href="module-xdh-map-line.html">xdh-map-line</a></li><li><a href="module-xdh-map-mask.html">xdh-map-mask</a></li><li><a href="module-xdh-map-measure.html">xdh-map-measure</a></li><li><a href="module-xdh-map-overview.html">xdh-map-overview</a></li><li><a href="module-xdh-map-placement.html">xdh-map-placement</a></li><li><a href="module-xdh-map-pointer.html">xdh-map-pointer</a></li><li><a href="module-xdh-map-polygon.html">xdh-map-polygon</a></li><li><a href="module-xdh-map-popup.html">xdh-map-popup</a></li><li><a href="module-xdh-map-rectangle.html">xdh-map-rectangle</a></li><li><a href="module-xdh-map-scatter.html">xdh-map-scatter</a></li><li><a href="module-xdh-map-text.html">xdh-map-text</a></li><li><a href="module-xdh-map-track.html">xdh-map-track</a></li><li><a href="module-xdh-map-type.html">xdh-map-type</a></li><li><a href="module-xdh-map-zoom.html">xdh-map-zoom</a></li></ul><h3>Classes</h3><ul><li><a href="ol.source.TileSuperMapRest.html">TileSuperMapRest</a></li></ul><h3>Events</h3><ul><li><a href="module-xdh-map-type.html#~event:change">change</a></li><li><a href="module-xdh-map.html#~event:changeType">changeType</a></li><li><a href="module-xdh-map-pointer.html#~event:copy">copy</a></li><li><a href="module-xdh-map-draw.html#~event:drawend">drawend</a></li><li><a href="module-xdh-map-draw.html#~event:drawstart">drawstart</a></li><li><a href="module-xdh-map-draw.html#~event:modifyend">modifyend</a></li><li><a href="module-xdh-map-draw.html#~event:modifystart">modifystart</a></li><li><a href="module-xdh-map-track.html#~event:move">move</a></li><li><a href="module-xdh-map.html#~event:ready">ready</a></li><li><a href="module-xdh-map-track.html#~event:start">start</a></li><li><a href="module-xdh-map-track.html#~event:stop">stop</a></li></ul><h3>Global</h3><ul><li><a href="global.html#bd09ToGcj02">bd09ToGcj02</a></li><li><a href="global.html#bd09ToGps84">bd09ToGps84</a></li><li><a href="global.html#bd09ToWgs84">bd09ToWgs84</a></li><li><a href="global.html#capitalize">capitalize</a></li><li><a href="global.html#convertToWgs84">convertToWgs84</a></li><li><a href="global.html#createLayer">createLayer</a></li><li><a href="global.html#createTdtLayer">createTdtLayer</a></li><li><a href="global.html#D2R">D2R</a></li><li><a href="global.html#featureStyleRender">featureStyleRender</a></li><li><a href="global.html#gcj02ToBd09">gcj02ToBd09</a></li><li><a href="global.html#gcj02ToWgs84">gcj02ToWgs84</a></li><li><a href="global.html#gcjToGps84">gcjToGps84</a></li><li><a href="global.html#get">get</a></li><li><a href="global.html#getDistance">getDistance</a></li><li><a href="global.html#getParent">getParent</a></li><li><a href="global.html#gps84ToGcj02">gps84ToGcj02</a></li><li><a href="global.html#keyMap">keyMap</a></li><li><a href="global.html#LAYERS">LAYERS</a></li><li><a href="global.html#mapReady">mapReady</a></li><li><a href="global.html#mix">mix</a></li><li><a href="global.html#mixProps">mixProps</a></li><li><a href="global.html#options">options</a></li><li><a href="global.html#outOfChina">outOfChina</a></li><li><a href="global.html#pi">pi</a></li><li><a href="global.html#prefix">prefix</a></li><li><a href="global.html#props">props</a></li><li><a href="global.html#set">set</a></li><li><a href="global.html#StyleMap">StyleMap</a></li><li><a href="global.html#wgs84ToBd09">wgs84ToBd09</a></li><li><a href="global.html#wgs84ToGcj02">wgs84ToGcj02</a></li></ul>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Tue May 21 2019 17:27:18 GMT+0800 (中国标准时间)
</footer>

<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>
